<template>
    <div class="sampleData">
        <div class="page_img"></div>
        <div class="header">
            <van-nav-bar title="补样数据" left-arrow @click-left="navLeftClick" />
        </div>
        <div class="search_box">
            <SearchHome v-model:value="searchValue" placeholder="请输入商品名称/商品码或69码/库存编码" clearabl @onSubmit="onSearch"
                :isFiltrate="false" />
        </div>
        <div class="commodity_classify">
            <div class="commodity_classify_item" @click="categoryIsShow = true">
                <span>{{ queryParams.categoryIdList.length ? '多品类' : '商品类目' }}</span>
                <img src="@/assets/commodity/icon_heisexiasanjiao.png" alt="">
            </div>
            <category :isShow="categoryIsShow" v-model:value="queryParams.categoryIdList" :multiple="true"
                @leftClick="categoryIsShow = false" @onSubmit="categorySubmit" />
            <div class="commodity_classify_item" @click="screenIsShow = true;">
                <span>{{ queryParams.supplierType === '' ? '供应商类型' : queryParams.supplierType }}</span>
                <img src="@/assets/commodity/icon_heisexiasanjiao.png" alt="">
            </div>
            <div class="commodity_classify_item" @click="investcategoryShow = true;">
                <span>{{ queryParams.sampleStatus === '' ? '补样状态' : queryParams.sampleStatusName }}</span>
                <img src="@/assets/commodity/icon_heisexiasanjiao.png" alt="">
            </div>
            <van-action-sheet title="供应商类型" v-model:show="screenIsShow" :actions="supplierTypeList"
                @select="onSupplierTypeCategory" />
            <van-action-sheet title="补样状态" v-model:show="investcategoryShow" :actions="sampleStatusList"
                @select="onSelectInvestCategory" />
        </div>
        <div class="list">
            <van-pull-refresh style="height: 100%;" v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                    <template v-slot:finished>
                        <div class="nothing_div" v-if="list.length == 0">
                            <van-image :src="nothingData"></van-image>
                            <div class="nothing_font">暂无数据</div>
                        </div>
                    </template>
                    <div class="product_list_van_list">
                        <div v-for="item in list" :key="item.id">
                            <ListItems :row="item" @click="handleGetDetails(item.id)" />
                            <div class="list_line"></div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
        <div class="footer">
            <div class="footer_item">邀约数合计：<span class="footer_item_lan">{{ sampleCount || 0 }}</span></div>
            <div class="footer_item">入库数合计：<span class="footer_item_lan">{{ inStockNum || 0 }}</span></div>
            <div class="footer_item">拒绝数合计：<span class="footer_item_hong">{{ refuseNum || 0 }}</span></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, onActivated } from 'vue';
import { useRouter } from 'vue-router'
import { getEnvValue } from "@/utils/index";
import { getSampleInvitationList, getDataStatistics } from '@/api/productHome/index'
import category from '@/components/category/index.vue'
import SearchHome from '@/views/productHome/productLists/components/searchHome/indexNew.vue'
import ListItems from './listItem.vue'
const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href
const router = useRouter()
const searchValue = ref("");
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
// 限制连续刷新数据重复问题
const refreFlag = ref(true)
// 类目开关
const categoryIsShow = ref(false)
// 供应商类型组件开关
const screenIsShow = ref<boolean>(false)
// 补样类型组件开关
const investcategoryShow = ref<boolean>(false)
// 邀约数合计
const sampleCount = ref(0)
// 入库数合计
const inStockNum = ref(0)
// 拒绝数合计
const refuseNum = ref(0)
const vantListScrollTop = ref<any>(0) // 滚动位置


const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    // 组合搜索
    contents: '',
    // 商品类目
    categoryIdList: [],
    // 供应商类型
    supplierType: '',
    // 补样类型
    sampleStatus: '',
    sampleStatusName: '',
})

// 供应商类型列表
const supplierTypeList = ref([
    { name: '全部', status: '' },
    { name: '源头厂家', status: '源头厂家' },
    { name: '供应链', status: '供应链' },
    { name: '代理商', status: '代理商' },
])
// 补样状态列表
const sampleStatusList = ref([
    { name: '全部', status: '' },
    { name: '响应中', status: '0' },
    { name: '已响应', status: '1' },
    { name: '已拒绝', status: '2' },
    { name: '已入库', status: '3' },
])
onMounted(() => {
    functionScroll('init')
})
onUnmounted(() => {
    functionScroll('delete')
});
/** 缓存页面进度条 */
const functionScroll = (type: string) => {
    const dom: any = document.querySelector('.van-pull-refresh')
    if (type === 'init') {
        dom?.addEventListener('scroll', (e: any) => {
            vantListScrollTop.value = e.target.scrollTop
        })
    } else if (type === 'delete') {
        dom?.removeEventListener('scroll', () => { });
    } else if (type === 'black') {
        dom.scrollTop = vantListScrollTop.value
    }
}
onActivated(() => {
    functionScroll('black')
})

/** 供应商类型选择事件 */
const onSupplierTypeCategory = (selection: any) => {
    screenIsShow.value = false;
    queryParams.value.supplierType = selection.status
    onRefresh()
}
/** 补样状态选择事件 */
const onSelectInvestCategory = (selection: any) => {
    investcategoryShow.value = false;
    queryParams.value.sampleStatus = selection.status
    queryParams.value.sampleStatusName = selection.name
    onRefresh()
}

// 头部导航点击事件
const navLeftClick = () => {
    router.back()
}
/** 根据商品名称搜索 */
const onSearch = () => {
    queryParams.value.contents = searchValue.value
    onRefresh()
}
/** 获取详情 */
const handleGetDetails = (id: string) => {
    router.push({
        path: `/sampleDetails/${id}`
    })
};
// 商品类目选择完成
const categorySubmit = () => {
    categoryIsShow.value = false
    onRefresh()
}
/** 查询商品列表 */
const getList = async () => {
    // 获取列表数据
    let res = await getSampleInvitationList(queryParams.value);
    // 获取统计数据
    let resNum = await getDataStatistics(queryParams.value)
    sampleCount.value = resNum.data.sampleCount
    inStockNum.value = resNum.data.inStockNum
    refuseNum.value = resNum.data.refuseNum
    res.rows.forEach(async (item) => {
        if (item.productImage) {
            item.productImages = getEnvValue("VITE_APP_PIC_URL") + item.productImage.split(",")[0]
        } else {
            item.productImages = "";
        }
    });
    setTimeout(() => {
        refreFlag.value = true
        // 空数据 停止加载
        if (res.rows.length == 0) {
            list.value = [];
            finished.value = true;
            return;
        }
        // 有数据 赋值列表 加载状态结束
        res.rows.forEach((item) => {
            finished.value = false;
            list.value.push(item);
        });
        loading.value = false;
        refreshing.value = false;
        // 如果list长度大于等于总数据条数，数据全部加载完成
        if (list.value.length >= res.total) {
            finished.value = true; //结束加载
        }
    }, 400);
};
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        list.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};
</script>
<script lang="ts">
export default { name: 'SampleData' }
</script>
<style lang="less" scoped>
.sampleData {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    background: url("@/assets/newui/productList/icon_shangpinbeijing@2x.png");
    background-size: 100% 170px;
    background-repeat: no-repeat;
    display: flex;
    flex-flow: column;
    position: relative;

    .page_img {
        background: url("@/assets/newui/productList/icon_shenpitu@2x.png");
        background-size: 100% 100%;
        position: absolute;
        width: 60px;
        height: 60px;
        top: 44px;
        right: 63px;

    }

    .header {
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        z-index: 6003;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar__title) {
            color: #1a1b1c !important;
            font-size: 18px !important;
            font-weight: 600 !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;

            &::after {
                display: none !important;
            }
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .search_box {
        margin-top: -10px;
    }

    .commodity_classify {
        width: 100%;
        height: 44px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        margin-bottom: 0;
        position: relative;
        border-radius: 15px 15px 0px 0px;

        .commodity_classify_item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            min-width: 0;

            img {
                width: 10px;
                height: 6px;
                margin-left: 5px;
            }

            span {
                // flex: 0.7;
                min-width: 0;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                text-align: right;
            }
        }

        .commodity_classify_div {
            flex: 0.3;
            margin-left: 10px;

            img {
                width: 16px;
                height: 18px;
            }
        }
    }

    .list {
        flex: 1;
        min-height: 0;
        background: #F6FAFF;
        overflow-y: auto;
    }

    .footer {
        width: 100%;
        height: 68px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .footer_item {
            font-weight: 500;
            font-size: 14px;
            color: #1A1B1C;

            .footer_item_lan {
                color: #0094FF;
            }

            .footer_item_hong {
                color: #FC2540;
            }
        }
    }
}

:deep(.van-pull-refresh) {
    overflow: scroll;
}
</style>